<template>
    <div class="footprint-container">
        <!-- 标题区域开始 -->
        <div class="title-wrap">
            <div class="left-wrap">
                <i class="iconfont icon-icon"></i>
                <span>我的足迹</span>
            </div>

            <!-- 搜索区域开始 -->
            <div class="footprint-search-wrap">
                <div class="search-wrap">
                    <el-input
                        v-model="params.goods_name"
                        style="width: 600px"
                        size="large"
                        placeholder="搜索商品"
                        :prefix-icon="Search"
                        :clearable="true"
                        />
                </div>
                <div class="search-btn">
                    <el-button type="default" size="large" @click="handlerSearchFootprint">搜索</el-button>
                </div>
            </div>
            <!-- 订单搜索区域结束 -->
        </div>
        <!-- 标题区域结束 -->

        <!-- 内容区域开始 -->
        <div class="content-wrap">
            <GoodsItemSkeleton  :isShowSkeleton="isShowSkeleton" v-for="(item, index) in 8" :key="index"/>

            <template v-if="footprintList.length > 0">
                <GoodsItem v-for="(item, index) in footprintList" :key="index" :goods="item" :isButton="true" buttonTxt="删除" @handlerOperate="handlerDelete"/>
            </template>
            <Empty style="margin: 0 auto;" v-if="!isShowSkeleton && footprintList.length == 0"/>
        </div>
        <!-- 内容区域结束 -->
    </div>

    <!-- 返回顶部组件 -->
    <BackTop @backTop="backTop" :isShowBackTop="isShowBackTop"></BackTop>

    <!-- 分页区域开始 -->
    <div class="page-wrap" v-if="total > 0">
        <el-pagination 
            background 
            layout="prev, pager, next" 
            :total="total"
            :page-size="params.page_size"
            :current-page="params.page"
            @current-change="handlerCurrentChange"
            />
    </div>
    <!-- 分页区域结束 -->
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue"
import { reqUserFootprintListAPI, reqDeleteUserFootprintAPI } from "@/apis/footprint"

import useScroll from '@/utils/useScroll'
import { Search } from '@element-plus/icons-vue'
import { ElNotification, ElMessageBox } from 'element-plus'


// --------------------- 定义全局变量开始 ---------------------
// 请求参数
const params = reactive({
    goods_name: '',
    page: 1,
    page_size: 8
})


// 定义足迹列表
const footprintList = ref([])

// 商品评价数量
const total = ref(0)

// 总页数
const pageTotal = ref(0)

// 是否显示骨架
const isShowSkeleton = ref(false)
// --------------------- 定义全局变量结束 ---------------------



// --------------------- 返回顶部功能开始 ---------------------
const isShowBackTop = ref(false)
const {scrollTop, scrollToTop} = useScroll()
watch(scrollTop, (oldValue, newValue) => {
    isShowBackTop.value = oldValue > 300 ? true : false
})

// 返回顶部
const backTop = () => {
    scrollToTop()
}
// --------------------- 返回顶部功能结束 ---------------------



// ----------------------- 加载页面开始 -----------------------
onMounted( async () => {
    await getFootprintList()
})
// ----------------------- 加载页面结束 -----------------------


// ----------------------- 翻页功能开始 -----------------------
const handlerCurrentChange = async (page) => {
    params.page = page
    await getFootprintList()

    // 返回顶部
    scrollToTop()
}
// ----------------------- 翻页功能结束 -----------------------


// ----------------------- 搜索足迹开始 -----------------------
const handlerSearchFootprint = () => {
    params.page = 1
    getFootprintList()
}
// ----------------------- 搜索足迹结束 -----------------------



// ------------------- 获取足迹列表功能开始 --------------------
const getFootprintList = async () => {
    // 显示骨架
    if (params.page == 1) {
        isShowSkeleton.value = true
    }

    footprintList.value = []
    
	// 请求数据
	const result = await reqUserFootprintListAPI(params)
	let footprints = result.data.user_footprints != null ? result.data.user_footprints : []
    total.value = result.data.total
    pageTotal.value = result.data.page_total

    footprints.forEach(item => {
        item.name = item.goods_name
        item.market_price = item.goods_price
        item.price = item.goods_price
        item.cover_url = item.goods_cover_url
        item.sales_num = 10000
    })

    footprintList.value = footprints
    
    // 隐藏骨架
    isShowSkeleton.value = false
}
// -------------------- 获取足迹列表功能结束 --------------------



// ---------------------- 删除足迹功能开始 ----------------------
const handlerDelete = (item) => {
    let id = item.id
    ElMessageBox.confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await reqDeleteUserFootprintAPI(id)

        await getFootprintList()

        ElNotification({type: 'success', message: '删除成功'})
    }).catch(() => {})
}
// ---------------------- 删除足迹功能结束 ----------------------
</script>

<style scoped lang="scss">
.footprint-container {
    background-color: #fff;
    padding: 0 15px 15px 15px;
    .title-wrap {
        padding: 15px 0;
        font-size: 18px;
        border-bottom: 1px solid #f5f5f5;
        color: $main-color;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-wrap {
            display: flex;
            align-items: center;
            .iconfont {
                font-size: 24px;
                margin-right: 5px;
            }
        }

        .footprint-search-wrap {
            display: flex;
            .search-wrap {
                margin-right: 10px;
            }
        }

    }

    .content-wrap {
        display: flex;
        flex-wrap: wrap;
        ::v-deep(.goods-item-skeleton-container) {
            &:nth-child(5n) {
                margin-right: 25px;
            }
            &:nth-child(4n) {
                margin-right: 0;
            }
        }
        ::v-deep(.goods-item-wrap) {
            margin-right: 30px;
            &:nth-child(5n) {
                margin-right: 30px;
            }
            &:nth-child(4n) {
                margin-right: 0;
            }
        }
    }
}

.page-wrap {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}
</style>